<template>
	<!-- my-order components -->
	<view class="templat">
		<view class="order"  v-for="(order,index) in orderList" :key="index" >
		   <view class="order-head">
		   	<text class="oder-number">{{order.number}}</text>
		   </view>
		   <view class="order-body flex">
		   	  <view class="body-left">
				  <view class='order-title'>
					  <image class="order-logo" :src="order.logo" mode=""></image>
					  <text class="order-titleInfo">{{order.titleInfo}} </text>
				  </view>
				  <view class="order-date">
					  <text>{{order.date}}</text>
					  <text>{{order.startAcc}}</text>
				  </view> 
			  </view>
			   <view class="body-right">
			   	 <view class="order-rice">{{order.rice}}</view>
				 <view class="order-state">{{getOrderstate(order.state)}}</view>
			   </view>
		   </view>
			<view class="order-foot">
				  <button type="default" size='mini'>删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-order",
	    props:{
			orderList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				orderList:[
					{
						logo:'https://img.yzcdn.cn/vant/cat.jpeg',//订单logo图片
						startAcc:'有效7张',//出发地址  不是必要
						titleInfo:'趵突泉-景点门票',//订单标题信息 
						number:'###123123121231',// 订单编号
						date:'2019-09-27',//订单日期
						state:'成功',//订单状态  0表示 已出票  1表示已预订
						rice:500 //订单金额
					}
				]
			};
		},
		beforeMount() {
			//页面加载数据
			this.loadingData()
		},
		methods:{
			loadingData(){
			  // 模拟订单数据
				 let orderList =[
					 {
						 logo:'https://img.yzcdn.cn/vant/cat.jpeg',//订单图片
						 startAcc:'有效7张',//出发地址  不是必要
						 titleInfo:'趵突泉-景点门票',//订单标题信息 
						 number:'###123123121231',// 订单编号
						 date:'2019-09-27',//订单日期
						 state:1,//订单状态  0表示 已出票  1表示已预订
						 rice:500//订单价钱
					 },
					  {
						 logo:'https://img.yzcdn.cn/vant/cat.jpeg',//订单图片
						 startAcc:'有效7张',//出发地址  不是必要
						 titleInfo:'趵突泉-景点门票',//订单标题信息 
						 number:'###123123121231',// 订单编号
						 date:'2019-09-27',//订单日期
						 state:0,//订单状态  0表示 已出票  1表示已预订
						 rice:500//订单价钱
					  },
					   {
						 logo:'https://img.yzcdn.cn/vant/cat.jpeg',//订单图片
						 startAcc:'有效7张',//出发地址  不是必要
						 titleInfo:'趵突泉-景点门票',//订单标题信息 
						 number:'###123123121231',// 订单编号
						 date:'2019-09-27',//订单日期
						 state:1,//订单状态  0表示 已出票  1表示已预订
						 rice:500//订单价钱
					   } 
				 ]
				 this.orderList = orderList
			},
			//判断订单状态
		  getOrderstate(state){
			  let orderState =''  
			  if(state==0){
				  return  orderState='已出票'
			  }else if(state==1){
				  return  orderState='已预订'
			  }
		  }	
		}
	}
</script>

<style lang="scss" scoped>
 .order{
	width: 97vw;
	margin: 0 auto;
	background-color: #3F536E; 
 }	
 .order-head{
	 height: 50upx;
 }
 .order-body{
	   display: flex;
	   flex-direction: row;
	   justify-content: space-between;
	.order-body>view{
		 margin-top: 25upx;
	 }
	 .order-title{
	 	 image{
			height: 50upx;
			width: 50upx;
			border-radius: 8upx;
		 }
	 }
 }
 .order-foot{
	 width: 100%;
	 display: flex;
	 button{
		 // float: right;
		 margin-left:auto;
		 margin-right: 20upx;
	 }
 }
</style>
